/**
 * 栅格系统--flex布局
 * @author SPY
 * @date 2020/03/29
 */
import React from 'react';
import { Row, Col } from 'antd';
import styles from './GridCommon.less';

export default () => {
  return (
    <>
      <Row>
        <Col flex={2}>
          <div className={styles.col_flex_1}>占总宽度的40%</div>
        </Col>
        <Col flex={3}>
          <div className={styles.col_flex_2}>占总宽度的60%</div>
        </Col>
      </Row>
      <Row style={{ marginTop: 10 }}>
        <Col flex="300px">
          <div className={styles.col_flex_1}>宽度300px</div>
        </Col>
        <Col flex="auto">
          <div className={styles.col_flex_2}>总宽度-300px</div>
        </Col>
      </Row>
    </>
  );
};
